<template>
	<view class="tui-center">
		<uni-nav-bar fixed left-icon="back" title="停车缴费"></uni-nav-bar>
		<view class="tui-parking-box">
			<view class="ui-title">
				<text>一键查询，轻松搞定</text>
			</view>
			<view class="ui-text">
				<text>让停车成为享受</text>
			</view>
		</view>
		<view class="ui-bgd">
			<!-- tab -->
			<view class="tab-box x-f">
				<view class="tab-item x-c" @tap="onLoginWay(0)">
					<text class="tab-title" :style="loginWay == 0 ? 'color:#6CB041': ''">找车</text>
					<view class="line-box" password v-show="loginWay === 0"></view>
				</view>
				<view class="tab-item x-c" @tap="onLoginWay(1)">
					<text class="tab-title" :style="loginWay == 1 ? 'color:#6CB041': ''">停车缴费</text>
					<view class="line-box" v-show="loginWay === 1"></view>
				</view>
			</view>
			<!--form-->
			<view class="ui-form-title">
				<text>请输入{{loginWay == 1 ? '需要缴费的': ''}}车牌号</text>
			</view>
			<view style="padding-bottom: 30rpx">
				<plate v-model="code" @listenPlateChange="plateChange"></plate>
			</view>

			<view v-if="loginWay === 0">
				<view class="ui-form-title">
					<text>请输入车位号</text>
				</view>
				<view class="ui-form-title" style="padding: 0 30rpx 30rpx;">
					<input class="input" type="text" v-model="spaceNo" placeholder="请输入车位号" placeholder-class="placeholder" />
				</view>
			</view>
		</view>

		<view class="tui-btn">
			<button class="button" type="default" @tap="fareGo()">查询</button>
		</view>

		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>
	</view>
</template>

<script>
    import uniIconfont from '@/components/uni-iconfont/index'
    import Plate from '@/components/plate/index'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'

	export default {
		components: {
            uniIconfont, Plate, uniLoginModel
		},
		data() {
			return {
                loginWay: 1,
                code: null,
                spaceNo: null
			}
		},
		methods: {
			//  查询
            fareGo() {
                console.log(this.code)
                if (!this.code) {
                    uni.showToast({title: '车牌号请输入完整', icon: "none"})
                    return
                }
                if(this.loginWay == 0) {
                    if (!this.spaceNo) {
                        uni.showToast({title: '车位号不能为空', icon: "none"})
                        return
                    }
                    this.$api.api('park.vehicle', {spaceNo: this.spaceNo, plateNo: this.code}).then(res => {
                        console.log(res)
						if (res.code == 200) {

						} else {
                            this.$api.msg(res.message)
						}
					})
                    uni.navigateTo({
                        url: `/pagesA/OCRparking/OCRparking?fareCode=${this.code}&spaceNo=${this.spaceNo}`
                    })
                } else {
                    uni.navigateTo({
                        url: `/pagesA/parkingFee/components/farepay?fareCode=${this.code}`
                    })
                }
            },
            plateChange(val){
                this.code = val.join('')
            },
            onLoginWay(flag) {
                this.loginWay = flag;
            },
		}
	}
</script>

<style lang="scss" scoped>
	.tui-parking-image {
		width: 100%;
		height: 400rpx;
		.tui-parking-img {
			width: 100%;
			height: 100%;
		}
	}
	.tui-parking-box {
		height: 340rpx;
		padding: 30rpx;
		background: #6CB041;
		.ui-title {
			font-size: 40rpx;
			color: #ffffff;
		}
		.ui-text {
			font-size: 30rpx;
			color: #eee;
		}
	}
	.ui-bgd {
		padding: 20rpx 0;
		background: #ffffff;
		margin: -120rpx 30rpx 0;
		border-radius: 20rpx;
		.tab-box {
			display: flex;
			border-bottom: 2rpx solid #eee;

			.tab-item {
				flex: 1;
				height: 80rpx;
				position: relative;

				.tab-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
					margin-bottom: 10rpx;
				}

				.line-box {
					position: absolute;
					width: 120rpx;
					height: 4rpx;
					background: #6CB041;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		.ui-form-title {
			padding: 30rpx;
			font-size: 34rpx;
			color: #666;
			.input {
				border: 2rpx solid #eee;
				height: 80rpx;
				border-radius: 15rpx;
			}
			.placeholder {
				padding-left: 15rpx;
			}
		}
	}

	.tui-btn {
		margin: 40rpx 30rpx;
		.button {
			background: $uni-color-success;
			color: #ffffff;
		}
	}
</style>
